<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>
    <style type="text/css">
        #areaDiv{
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
        }
    </style>

    <script type="text/javascript">
        // window.onload = function(){
        //     //js原生获取事件对象
        //     document.getElementById("areaDiv").onclick = function (event) {
        //         console.log(event)
        //     };
        // }

        //使用jquery获取事件对象
        // $(function (){
        //     $("#areaDiv").click(function (event){
        //         console.log(event);
        //     });
        // })

        //使用bind对元素绑定多个事件,怎么样判断当前响应的是什么事件
        $(function(){
            $("#areaDiv").bind("mouseover mouseout",function(event){
                if(event.type == 'mouseover'){
                    console.log("鼠标移入")
                }else{
                    console.log("鼠标移出");
                }
            })
        })
    </script>
</head>
<body>
<div id="areaDiv">
我是areaDiv
</div>
</body>
</html>